<template>
  <el-dialog :title="formData.id?'编辑人员':'新增人员'" :visible="dialogVisible" @close="closeFn">
    <!-- 表单内容 -->
    <el-form label-position="right" label-width="80px" ref="workerForm" :model="formData" :rules="rules">
      <el-form-item label="人员名称：" prop="userName">
        <el-input
          v-model="formData.userName"
          maxlength="5"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="角色：" prop="roleId">
        <el-select v-model="formData.roleId" placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.roleCode"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话：" prop="mobile">
        <el-input v-model="formData.mobile" maxlength="11" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="负责区域：" prop="regionId">
        <el-select v-model="formData.regionId" placeholder="请选择">
          <el-option
            v-for="item in regionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="avatarItem" label="头像" style="height: 122px" prop="image">
        <el-upload
          class="avatar-uploader"
          action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
          :show-file-list="false"
          name="fileName"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="formData.image" :src="formData.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="tip">支持扩展名：jpg、png，文件不得大于100kb</div>
      </el-form-item>
      <el-form-item label="状态">
        <el-checkbox v-model="formData.status">是否启用</el-checkbox>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <button class="concel" @click="closeFn">取消</button>
      <button class="confirm" @click="confirmFn">确 定</button>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleList, getRegionList, addUserWork, updateUserWork } from '@/api/person'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      imageUrl: '',
      formData: {
        userName: '',
        roleId: '',
        mobile: '',
        regionId: '',
        regionName: '',
        status: false,
        image: ''
      },
      roleList: [],
      regionList: [],
      rules: {
        userName: [{ required: true, message: '请输入', trigger: 'blur' }],
        roleId: [{ required: true, message: '请输入', trigger: 'change' }],
        mobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        regionId: [{ required: true, message: '请输入', trigger: 'change' }],
        image: [{ required: true, message: '请上传', trigger: 'blur' }]

      }
    }
  },
  async created () {
    this.roleList = await getRoleList()
    const { currentPageRecords } = await getRegionList()
    this.regionList = currentPageRecords
  },
  methods: {
    closeFn () {
      // this.formData = {
      //   userName: '',
      //   roleId: '',
      //   mobile: '',
      //   regionId: '',
      //   regionName: '',
      //   status: false,
      //   image: ''
      // }
      // this.formData.id = ''
      // this.$refs.workerForm.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    // 上传成功时
    handleAvatarSuccess (res, file) {
      // this.imageUrl = res       // console.log(file)
      this.formData.image = URL.createObjectURL(file.raw)
    },
    // 确认事件
    async confirmFn () {
      // 先补充区域名字
      const res = this.regionList.find(item => item.id === this.formData.regionId)
      if (res) this.formData.regionName = res.name
      // 校验
      try {
        await this.$refs.workerForm.validate()
        if (this.formData.id) { // 编辑
          await updateUserWork(this.formData.id, this.formData)
          this.$message.success('修改人员成功')
        } else { // 新增
          await addUserWork(this.formData)
          this.$message.success('新增人员成功')
        }
        // this.$parent.getUserWorkerList(this.$parent.pageInfo)
        // this.$emit('update:dialogVisible', false)
        this.closeFn()
        this.$emit('UserWorkerList')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::v-deep .el-dialog {
  margin-top: 15vh;
  width: 630px;
  border-radius: 10px;
}
.el-form-item {
  width: 100% !important;
}

::v-deep .el-form-item__label {
  width: 140px !important;
  height: 36px !important;
}
::v-deep .el-form-item__content {
  width: 396px;
  height: 36px !important;
  margin-left: 140px !important;
}
::v-deep .el-input__inner {
  height: 36px;
  line-height: 36px;
}
::v-deep .el-input__suffix-inner {
  line-height: 36px;
}
.el-select {
  width: 396px;
}

::v-deep .el-upload {
  width: 86px;
  height: 86px;
  background: #f3f6fb;
  border: 1px dashed #d8dde3;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}
::v-deep .avatar-uploader{
  height: 86px;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #333;
}
.avatar-uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 84px;
  height: 84px;
  line-height: 84px;
  text-align: center;
}
img{
    width: 84px;
  height: 84px;
}
.avatar {
  width: 84px;
  height: 84px;
  display: block;
}
.tip {
  width: 100%;
  font-size: 14px;
  color: #bac0cd;
}
::v-deep .el-form-item__error{
  padding-top:6px;
}
.avatarItem ::v-deep .el-form-item__error{
  padding-top: 85px;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
.confirm {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  border: none;
  background: linear-gradient(135deg, #ff9743, #ff5e20);
  color: #fff;
  margin-left: 34px;
  font-size: 14px;
    border-radius: 4px;
}
.concel {
  width: 80px !important;
  height: 36px;
  padding: 0;
  border: none;
  background: #fbf4f0;
  color: #655b56;
  font-size: 14px;
    border-radius: 4px;
}
</style>
